<template>
  <Card>
    <Form layout="inline" :labelCol="{ span: 8 }" :wrapperCol="{ span: 24 }">
      <FormItem label="一级分类">
        <Select
          placeholder="请选择一级分类"
          :value="categoryStore.category1Id"
          @change="categoryStore.getCategory2List"
          class="category-selector-select"
          :disabled="props.disabled"
        >
          <SelectOption v-for="c1 in categoryStore.category1List" :key="c1.id" :value="c1.id">
            {{ c1.name }}
          </SelectOption>
        </Select>
      </FormItem>
      <FormItem label="二级分类">
        <Select
          placeholder="请选择二级分类"
          :value="categoryStore.category2Id"
          @change="categoryStore.getCategory3List"
          class="category-selector-select"
          :disabled="props.disabled"
        >
          <SelectOption v-for="c2 in categoryStore.category2List" :key="c2.id" :value="c2.id">
            {{ c2.name }}
          </SelectOption>
        </Select>
      </FormItem>
      <FormItem label="三级分类">
        <Select
          placeholder="请选择三级分类"
          :value="categoryStore.category3Id"
          @change="categoryStore.setCategory3Id"
          class="category-selector-select"
          :disabled="props.disabled"
        >
          <SelectOption v-for="c3 in categoryStore.category3List" :key="c3.id" :value="c3.id">
            {{ c3.name }}
          </SelectOption>
        </Select>
      </FormItem>
    </Form>
  </Card>
</template>

<script lang="ts">
  // 为了给组件取一个名字
  export default {
    name: 'CategorySelector',
  };
</script>

<script lang="ts" setup>
  import { onMounted, onBeforeUnmount, defineProps } from 'vue';
  import { Card, Form, FormItem, SelectOption, Select } from 'ant-design-vue';
  import { useCategoryStore } from '/@/store/modules/category';

  const props = defineProps({
    disabled: {
      type: Boolean,
      default: false,
    },
  });

  const categoryStore = useCategoryStore();

  onMounted(() => {
    categoryStore.getCategory1List();
  });

  onBeforeUnmount(() => {
    categoryStore.resetCategory();
  });
</script>

<style scoped>
  .category-selector-select {
    width: 200px !important;
  }
</style>
